<template>
  <!-- 装箱明细-->
  <a-button type="primary" size="mini" v-if="['SHIPPED', 'TO_BE_SHIPPED'].includes(detail.status)" class="print-btn" @click="emit('print')">打印装箱单</a-button>
  <a-tabs :default-active-key="0" style="width: 600px">
    <a-tab-pane v-for="(box, i) in list" :key="i" :title="`装箱${i + 1}`">
      <div class="box-detail">
        <a-row>
          <a-col :span="7">
            <p>箱号：B{{ i + 1 }}</p>
          </a-col>
          <a-col :span="17">
            <p>重量：{{ box.weight }}KG（{{ box.weight2 }}lb）</p>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="7">
            <p>SKU数量：{{ box.boxNum }}种</p>
          </a-col>
          <a-col :span="17">
            <p>箱规：{{ box.length }}CM*{{ box.width }}CM*{{ box.height }}CM（{{ box.length2 }}in*{{ box.width2 }}in*{{ box.height2 }}in）</p>
          </a-col>
        </a-row>
      </div>

      <a-table class="table-normal-line" :columns="columns" :data="box.boxSkus" size="mini" :summary="true" :bordered="false" :pagination="false">
        <template #img="{ record }">
          <ImgPopover :src="record.productImg">
            <template #con>
              <a-image width="40" height="40" fit="contain" :src="record.productImg" />
            </template>
          </ImgPopover>
        </template>
        <template #sku="{ record }">
          <ShowSpuDetailBySku :val="record.sku" :showLimit="false" :renderBody="false" />
        </template>
        <template #msku="{ record }">
          <TextLimit :rows="1">{{ record.msku }}</TextLimit>
          <TextLimit :rows="1">{{ record.asin }}</TextLimit>
        </template>
        <template #summary-cell="{ column, record }">
          <div v-if="column.dataIndex == 'sku'">合计</div>
          <div v-if="column.dataIndex == 'inboxNum'">{{ record.inboxNum }}</div>
        </template>
      </a-table>
    </a-tab-pane>
  </a-tabs>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue'
  const emit = defineEmits(['print'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
    detail: {
      type: Object,
      default: () => {},
    },
    source: {
      type: String,
      default: 'sale',
    },
  })
  const columns = reactive([
    {
      title: '图片',
      dataIndex: 'img',
      slotName: 'img',
      width: 60,
    },
    {
      title: 'MSKU/ASIN',
      dataIndex: 'msku',
      slotName: 'msku',
      width: 140,
    },
    {
      title: 'FNSKU',
      dataIndex: 'fnsku',
      width: 140,
    },
    {
      title: 'SKU',
      dataIndex: 'sku',
      width: 140,
      slotName: 'sku',
    },
    {
      title: '装箱数',
      dataIndex: 'inboxNum',
      width: 70,
    },
  ])
</script>
<style lang="less" scoped>
  .box-detail {
    margin: 10px 0;
    font-size: 12px;
  }
  .print-btn {
    position: absolute;
    right: 19px;
    top: 20px;
    z-index: 1;
  }
</style>
